<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<style type="text/css">
			body>div{
				width:200px;
				border:4px solid #ccc;
				margin: 0 auto;
				overflow: hidden;
				padding-bottom: 4px;
			}
			div>div{
				width:135px;
				height:37px;
				border: 4px solid #ccc;
				margin:4px 0 0 4px;
				float: left;
				border-radius:4px;
			}
			input{
				width:45px;
				height:45px;
				border-radius:4px;
				border: 4px solid #ccc;
				margin:4px 0 0 4px;
				float: left;
			}
		</style>
		<script type="text/javascript">
			function myfn(){
				//得到事件源
				var obj = event.target || event.srcElement;
				//只响应按钮
				if (obj.nodeName=="DIV") {
					return;
				}
				var str = obj.value;
				
				 if(str=='C'){
					text.innerText = null;
				}else if(str=='='){
					text.innerText =eval(text.innerText);
				}else{
					text.innerText +=str; 
				} 
			}
		</script>
	</head>
	<body>
		<div onclick="myfn()">
			<div id="text"></div>
			<input type="button" value="C">
			<input type="button" value="7">
			<input type="button" value="8">
			<input type="button" value="9">
			<input type="button" value="/">
			<input type="button" value="4">
			<input type="button" value="5">
			<input type="button" value="6">
			<input type="button" value="*">
			<input type="button" value="1">
			<input type="button" value="2">
			<input type="button" value="3">
			<input type="button" value="-">
			<input type="button" value="0">
			<input type="button" value=".">
			<input type="button" value="=">
			<input type="button" value="+">
		</div>
	</body>
</html>
